<template>
  <view class="wrap" style="padding-bottom: 60px">
    <u-cell-group :border="false">
      <u-gap height="20" bg-color="#f5f5f5"></u-gap>
      <u-cell-item title="头像" :arrow="false">
        <u-avatar
          size="60"
          bg-color="#000;"
          :src="avatarUrl"
          style="position: absolute; right: 15px; top: 12px;cursor: pointer;"
          @click="chooseAvatar"
        ></u-avatar>
      </u-cell-item>
      <u-cell-item
        title="公司"
        value="江西索格科技有限公司"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        title="所属部门"
        :value="userInfo.dept ? userInfo.dept.deptName : ''"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item title="岗位" :title-width="180" :arrow="false">
        <span v-for="item in userInfo.roles" :key="item.id">{{
          item.roleName+' '
        }}</span>
      </u-cell-item>
      <u-cell-item
        title="手机"
        :value="userInfo.phonenumber"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        title="邮箱"
        :value="userInfo.email"
        :title-width="180"
        :arrow="false"
      ></u-cell-item>
      <u-gap height="20" bg-color="#f5f5f5"></u-gap>
    </u-cell-group>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        dept: {},
      },
      avatarUrl: '',
    }
  },
  onLoad() {
    this.$u.api.getUserInfo().then((res) => {
      if (res.code == '200') {
        this.userInfo = res.user
        this.avatarUrl = this.vuex_config.baseUrl + res.user.avatar
        // console.log(this.userInfo, this.vuex_config.baseUrl, 'userInfo')
      }
    })
  },
  onShow() {
    this.$u.api.getHomeCount().then((res) => {
      if (res.code == '200') {
        let count = res.data > 0 ? (res.data > 99 ? '99+' : res.data + '') : 0
        uni.setTabBarBadge({
          index: 0,
          text: count,
        })
      }
    })
  },
  methods: {
    chooseAvatar() {
      uni.chooseImage({
        count: 1, // 选择一张图片
        sizeType: ['original', 'compressed'], // 原图或压缩图
        sourceType: ['album', 'camera'], // 相册或相机
        success: (res) => {
          const tempFile = res.tempFiles[0]
          const fileName = tempFile.name
          const filePath = res.tempFilePaths[0]
          if (fileName) {
            this.startUploadFile(filePath)
          }
        },
      })
    },
    startUploadFile(filePath) {
      let url
      // #ifdef APP-PLUS
      url = this.vuex_config.baseUrl + '/system/user/profile/avatar'
      // #endif
      // #ifdef H5
      url = this.vuex_config.baseUrl + '/system/user/profile/avatar'
      // #endif
      uni.showLoading({
        title: '加载中',
      })
      uni.uploadFile({
        url,
        filePath,
        name: 'avatarfile',
        header: {
          authorization: uni.getStorageSync('sgkj_token'),
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          this.avatarUrl = this.vuex_config.baseUrl + data.imgUrl
        },
        fail: (err) => {
          console.log(err)
        },
        complete: () => {
          uni.hideLoading()
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.u-form {
  background: #fff;
  padding: 0 15px;
}

.u-size-medium {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20px;
  font-size: 28rpx;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  border: 1px solid #5186e7;
}

.u-hairline-border:after {
  border: 1px solid #5186e7 !important;
}

.input-placeholder {
  text-align: right;
}

.u-input {
  text-align: right !important;
}

.u-form-item {
  font-size: 36rpx;
}
</style>
